<template>
  <div>
    <h1>App组件</h1>
    <div class="list">
      <div>
        <Content v-for="item in contentList1" :key="item.id" v-bind="item">
          <!-- 
          v-slot的值：是内部slot插槽元素 传递出来的数据 组成的对象
       -->
          <template #default="{ item }">
            <button>{{ item }}</button>
          </template>
        </Content>
      </div>
      <div>
        <Content v-for="item in contentList2" :key="item.id" v-bind="item">
          <!-- 
          v-slot的值：是内部slot插槽元素 传递出来的数据 组成的对象
       -->
          <template #default="{ item }">
            <input type="text" :value="item" />
          </template>
        </Content>
      </div>
      <div>
        <Content v-for="item in contentList3" :key="item.id" v-bind="item">
          <!-- 
          v-slot的值：是内部slot插槽元素 传递出来的数据 组成的对象
       -->
          <template #default="{ item }">
            <span>{{ item }}</span>
          </template>
        </Content>
      </div>
    </div>
  </div>
</template>

<script>
import Content from "@/components/Content";
export default {
  name: "App",
  components: {
    Content,
  },
  data() {
    return {
      contentList1: [
        {
          id: 1,
          type: "美食",
          list: ["火锅", "烧烤", "炒菜", "小龙虾"],
        },
        {
          id: 2,
          type: "游戏",
          list: ["DNF", "CF", "CS", "LOL"],
        },
        {
          id: 3,
          type: "电影",
          list: ["教父", "阿甘正传", "肖申克救赎", "大话西游"],
        },
      ],
      contentList2: [
        {
          id: 1,
          type: "美食",
          list: ["火锅", "烧烤", "炒菜", "小龙虾"],
        },
        {
          id: 2,
          type: "游戏",
          list: ["DNF", "CF", "CS", "LOL"],
        },
        {
          id: 3,
          type: "电影",
          list: ["教父", "阿甘正传", "肖申克救赎", "大话西游"],
        },
      ],
      contentList3: [
        {
          id: 1,
          type: "美食",
          list: ["火锅", "烧烤", "炒菜", "小龙虾"],
        },
        {
          id: 2,
          type: "游戏",
          list: ["DNF", "CF", "CS", "LOL"],
        },
        {
          id: 3,
          type: "电影",
          list: ["教父", "阿甘正传", "肖申克救赎", "大话西游"],
        },
      ],
    };
  },
};
</script>

<style scoped>
.list {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}
</style>

